<template>
  <div>
    <Modal
      :title="title"
      :value="modalState"
      :loading="loading"
      @on-ok="handleSubmit"
      @on-cancel="cancel"
      width="60%">
      <Form
        ref="roleManageModal"
        :model="row"
        :rules="ruleInline"
        style="width: 100%; margin-left: 35px;"
        :label-width="150">
        <FormItem prop="gname" label="角色名称：" style="width: 350px">
          <Input v-model="row.gname" type="text" placeholder="请输入角色名称" />
        </FormItem>
        <!-- <FormItem prop="menu" label="账号登录默认展开菜单：" style="width: 350px">
          <Select v-model="row.menu">
            <Option value="首页控制台">
              首页控制台
            </Option>
            <Option value="客户管理">
              客户管理
            </Option>
            <Option value="销售管理">
              销售管理
            </Option>
            <Option value="任务管理">
              任务管理
            </Option>
            <Option value="内容管理">
              内容管理
            </Option>
            <Option value="短信管理">
              短信管理
            </Option>
            <Option value="财务管理">
              财务管理
            </Option>
            <Option value="系统设置">
              系统设置
            </Option>
          </Select>
        </FormItem> -->
        <FormItem prop="id" label="权限设置：">
          <!-- <div v-for="(item, index) in roleListData">
              <Checkbox  @click.prevent.native="handleChange($event,item)">
                <span>{{item.name}}</span>
              </Checkbox>
            <CheckboxGroup v-model="roleListChildren">
              <Checkbox v-for="(item, index) in item.children" :key="index" :label="item.id">
                <span>{{item.name}}</span>
              </Checkbox>
            </CheckboxGroup>
          </div> -->
          <CheckboxGroup v-model="roleListChildren">
            <div>
              <div v-for="(item, index) in roleListData" :key="index">
                <Checkbox :label="item.id" @click.prevent.native="handleChange($event,item)">
                  <span>{{item.name}}</span>
                </Checkbox>
                <span v-for="(item, index) in item.children" :key="index">
                  <Checkbox :label="item.id" @click.prevent.native="handleChangeChild($event, item)">
                    <span>{{item.name}}</span>
                  </Checkbox>
                </span>
              </div>
            </div>
          </CheckboxGroup>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  name: 'RoleManageModal',
  data () {
    return {
      title: '',
      show: false,
      roleListChildren: [],
      roleList: [],
      checked: false,
      loading: true,
      ruleInline: {
        gname: [
          {
            required: true,
            message: '角色名称不能为空',
            trigger: 'blur'
          }
        ]
        // name: [
        //   { required: true, message: '姓名不能为空', trigger: 'blur' }
        // ],
        // tel: [
        //   { required: true, message: '手机号不能为空', trigger: 'blur' }
        // ]
      }
    }
  },
  updated () {
    if (this.row.id && this.row.id !== undefined) {
      this.title = '编辑角色'
    } else {
      this.title = '添加角色'
    }
  },
  computed: {
    ...mapState({
      // row: state => state.taskList.row,
      modalState: state => state.modal.modalState,
      row: state => state.role.row,
      roleListData: state => state.role.roleListData,
      roleInfoList: state => state.role.roleInfoList
    })
  },
  methods: {
    ...mapActions(['updateModalState', 'getRoleInfoList']),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$refs.roleManageModal.validate((valid) => {
        if (!valid) {
          return this.changeLoading()
        }
        this.$emit('role-manage-valid', {
          gname: this.row.gname,
          role: this.row.role,
          id: this.roleListChildren.join()
        })
        // this.$refs['roleManageModal'].resetFields()
      })
    },
    cancel () {
      this.updateModalState(false)
      this.$refs['roleManageModal'].resetFields()
    },
    handleChange (event, data) {
      // if (data.checked) {
      //   data.checked = false
      //   if (data.children && data.children.length > 0) {
      //     data.children.forEach(item => {
      //       item.checked = false
      //     })
      //   }
      // } else {
      //   data.checked = true
      //   if (data.children && data.children.length > 0) {
      //     data.children.forEach(item => {
      //       item.checked = true
      //     })
      //   }
      // }
      // console.log(event.target.checked)
      // console.log(event)
      // console.log(data)
      if (event.target.checked === true) {
        // console.log(1)
        this.roleListChildren = [...this.roleListChildren, data.id]
        if (data.children && data.children.length > 0) {
          data.children.forEach(item => {
            this.roleListChildren = [...this.roleListChildren, item.id]
          })
        }
      } else if (event.target.checked === false) {
        // console.log(2)
        this.roleListChildren.splice(this.roleListChildren.findIndex(item => item === data.id), 1)
        if (data.children && data.children.length > 0) {
          data.children.forEach(dataitem => {
            const index = this.roleListChildren.findIndex(item => item === dataitem.id)
            // console.log(index)
            if (index > -1) {
              this.roleListChildren.splice(index, 1)
            }
          })
        }
      }
    },
    handleChangeChild (event, data) {
      // if (data.checked) {
      //   data.checked = false
      // } else {
      //   data.checked = true
      // }
      // console.log(data.id)
      let parentId = ''
      this.roleListData.forEach((dataitem) => {
        if (data.pid === dataitem.id) {
          parentId = dataitem.id
        }
      })
      if (event.target.checked === true) {
        this.roleListChildren = [...this.roleListChildren, data.id]
        if (this.roleListChildren.indexOf(parentId) === -1) {
          this.roleListChildren = [...this.roleListChildren, parentId]
        }
      } else if (event.target.checked === false) {
        this.roleListChildren.splice(this.roleListChildren.findIndex(item => item === data.id), 1)
      }
    }
  },
  mounted () {
    if (this.row.role !== '') {
      this.roleListChildren = this.roleInfoList
    }
  }
}
</script>
